<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/11/12
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="shortcut icon" href="#"/>
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div id="test12">
    <input type="hidden" id="rid"/>
    <div id="power" class="demo-tree-more"></div>
    <%--提交按钮--%>
    <button class="layui-btn" onclick="Quanxian()">分配权限</button>
</div>

<%--添加部门弹出框--%>

<div id="addDeptForm">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入角色名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<div id="updDeptForm">
    <form class="layui-form" action="" lay-filter="modify">
        <div class="layui-form-item">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="id" required lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

    {{# if(d.name=="总经理"){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" &lt;%&ndash;lay-event="del"&ndash;%&gt;>分配权限</a>
    {{# } }}
    {{# if(d.name!="总经理"){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">分配权限</a>
    {{# } }}


  <%--  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">分配权限</a>--%>
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script>
    var tree = "";
    var $ = "";
    var layer = "";
    layui.use(['table', 'layer', 'form', 'tree'], function () {
        var table = layui.table;
        layer = layui.layer;
        $ = layui.jquery;
        var form = layui.form;
        tree = layui.tree;
        $("#addDeptForm").hide();
        $("#updDeptForm").hide();
        $("#test12").hide();
        var Quan = [];


        table.render({
            elem: '#test' //id为test的table
            , url: '${pageContext.request.contextPath}/role'   //url 查询数据   所有的客户的数据
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '角色表'
            //data[{ id:12,name:123}]
            , cols: [[
                {field: 'id', title: 'ID', fixed: 'left', sort: true}
                , {field: 'name', title: '角色'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true
        });

        $.ajax({
            url: "${pageContext.request.contextPath}/ro/quanFen",
            async: false,
            success: function (r) {
                Quan = r;
            }
        })
        tree.render({
            elem: '#power'
            , data: Quan
            , showCheckbox: true  //是否显示复选框
            , id: 'demoId1'
            , click: function (obj) {
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态' + obj.state + '<br>节点数据：' + JSON.stringify(Quan));
            }
        });
        //监听行工具事件  test  表格的id
        table.on('tool(test)', function (obj) {
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            //console.log(obj)
            if (obj.event === 'del') {
                $("#rid").val(data.id);
                layer.open({
                    title: '分配权限'
                    , type: 1
                    , area: ['400px', '300px']
                    , offset: '50px'
                    , content: $("#test12")
                    , moveOut: true
                    , anim: 4
                });
                //刷新权限树
                tree.reload('demoId1', {});
                var checkData = [];
                // alert(checkData);
                $.ajax({
                    url: "${pageContext.request.contextPath}/ro/queryQuan",
                    data: {rid: data.id},
                    async: false,
                    dataType: "JSON",
                    success: function (d) {
                        for (var i = 0; i < d.length; i++) {
                            checkData.push(d[i].mid);
                        }

                    }

                })
                tree.setChecked("demoId1", checkData);

            } else if (obj.event === 'edit') {
                form.val("modify", data);
                layer.open({
                    title: '修改信息'
                    , type: 1
                    , area: ['400px', '300px']
                    , offset: '50px'
                    , content: $("#updDeptForm")
                    , moveOut: true
                });
                form.on('submit(formDemo)', function (data) {
                    //layer.msg(JSON.stringify(data.field));
                    //1.将获取到到的数据保存到数据库
                    $.ajax({
                        url: "${pageContext.request.contextPath}/role?method=add",
                        data: data.field,  //当前表单里面填写的数据{name:'',name1:''}
                        type: "post",

                        success: function (r) {

                            layer.closeAll();
                            //刷新一下table
                            table.reload('test', {
                                page: {
                                    curr: 1
                                }
                            })


                        }, error: function (msg) {
                            alert("服务器错误")
                        }

                    })

                    return false;
                });
            }
        });


        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            layer.open({
                title: '添加角色信息'
                , type: 1
                , area: ['350px', '250px']
                , offset: '50px'
                , content: $("#addDeptForm")
                , moveOut: true
            });

            form.on('submit(formDemo)', function (data) {
                //layer.msg(JSON.stringify(data.field));
                //1.将获取到到的数据保存到数据库
                $.ajax({
                    url: "${pageContext.request.contextPath}/role?method=add",
                    data: data.field,  //当前表单里面填写的数据{name:'',name1:''}
                    type: "post",
                    success: function (r) {

                        layer.closeAll();
                        //刷新一下table
                        table.reload('test', {
                            page: {
                                curr: 1
                            }
                        })
                    }, error: function (msg) {
                        layer.msg("服务器错误")
                    }

                })
                return false;
            });


        });


    });
    function Quanxian() {
        var rid = $("#rid").val();
        var arr = [];//目的 是为了装 选中的菜单的id
        //获取  tree菜单里面选中的节点的信息
        var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
        //获取id  所有选中的菜单的id
        for (var i = 0; i < checkedData.length; i++) {
            //一级菜单的内容
            var parentNode = checkedData[i];
            // alert(JSON.stringify(parentNode));
            //父级菜单的id
            var id = parentNode.id;
            arr.push(id);
            //子菜单的xinxi
            var childrenNode = parentNode.children;
            for (var j = 0; j < childrenNode.length; j++) {
                var cid = childrenNode[j].id;
                arr.push(cid);
            }
        }
        var menuid = arr.join(",");

        $.ajax({
            url: "${pageContext.request.contextPath}/ro/tianQuan",
            data: {rid: rid, mid: menuid},
            type: 'post',
            success: function (d) {
                layer.alert("分配成功！！！！");
                layer.closeAll();
            }, error: function () {
                layer.msg("服务器错误");
            }

        })


        //layer.alert(JSON.stringify(checkedData), {shade:0});

    }


</script>
</body>
</html>